<template>
  <div>
    <h2>Course</h2>
    <ul>
      <li v-for="c in courses" :key="c.id">
        <!-- <router-link :to="`/home/course/item/${c.id}/${c.name}`">{{c.name}}</router-link> -->
        <!-- <router-link :to="{name: 'CourseItem', params: {id: c.id, name: c.name}}">{{c.name}}</router-link> -->

        <!-- <router-link :to="`/home/course/item?id=${c.id}&name=${c.name}`">{{c.name}}</router-link> -->
        <!-- <router-link :to="{name: 'CourseItem', query: {id: c.id, name: c.name}}">{{c.name}}</router-link> -->
        <!-- <router-link :to="{path: '/home/course/item', query: {id: c.id, name: c.name}}">{{c.name}}</router-link> -->

        <router-link :to="{name: 'CourseItem', params: {id: c.id}, query: {name: c.name}}">{{c.name}}</router-link>

      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Course',
  data () {
    return {
      courses: [
        {id: '001', name: 'JS'},
        {id: '002', name: 'React'},
        {id: '003', name: 'Vue'}
      ]
    }
  }
}
</script>

<style scoped>

</style>
